<template>
  <div style="display: flex; flex-direction: column">
    <div
      style="
        width: 350px;
        background: #93b360;
        color: white;
        height: 20px;
        text-align: center;
        line-height: 20px;
        padding: 5px 0;
      "
    >
      预设设置
    </div>
    <div
      style="
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 290px;
        align-items: center;
        justify-content: center;
        background: black;
        color: white;
      "
    >
      <div style="display: flex; align-items: center; height: 30px">
        延时：
        <div
          style="width: 100px; height: 20px;background:grey;overflow:hidden;"
        
        >{{delay}}</div>
      </div>
      <div style="display: flex; align-items: center; height: 30px">
        缓冲时间：
        <div
          style="width: 100px; height: 20px;background:grey;overflow:hidden;"
         
        >{{bufferTime}}</div>
      </div>
      <div style="display: flex; align-items: center; height: 30px">
        变量名称：
        <div
          style="width: 100px; height: 20px;background:grey;overflow:hidden;"
          
        >{{beChangedVariableName}}</div>
      </div>
      <div style="display: flex; align-items: center; height: 30px">
        初始值：
        <div
          style="width: 100px; height: 20px;background:grey;overflow:hidden;"
          
        >{{initialValue}}</div>
      </div>
      <div style="display: flex; align-items: center; height: 30px">
        目标值：
        <div
          style="width: 100px; height: 20px;background:grey;overflow:hidden;"
     
        >{{targetValue}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CMDComponent",
  inject: ["getNode"],
  data() {
    return {
   
      delay: 0,
      bufferTime: null,
      beChangedVariableName: null,
      initialValue: null,
      targetValue: null,
    };
  },
  mounted() {
    const self = this;
    const node = this.getNode();
    node.on("change:data", ({ current }) => {
      if (current === undefined) {
        self.delay = null;
        self.bufferTime = null;
        self.beChangedVariableName = null;
        self.initialValue = null;
        self.targetValue = null;
        return;
      }
      self.delay = current.delay;
      self.bufferTime = current.bufferTime;
      self.beChangedVariableName = current.beChangedVariableName;
      self.initialValue = current.initialValue;
      self.targetValue = current.targetValue;
    });
  },
};
</script>

<style scoped>

</style>